<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我最可爱的月月</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-color: black;
			}
			.main{
				width: 900px;
				height: 650px;
				background-color: aqua;
				margin: 0 auto;
				margin-top: 100px;
				overflow: hidden;
				border-radius: 20px;
				box-shadow: 0px 0px 50px white;
			}
			.main h2{
				height: 50px;
				line-height: 50px;
				text-align: center;
				color: white;
			}
			ul,li{
				list-style: none;
			}
			.main .big{
				width: 750px;
				height: 600px;
				overflow: hidden;
				float: left;
			}
			.big>li>img{
				display: block;
				width: 750px;
				height: 600px;
			}
			.s{
				width: 150px;
				height: 600px;
				float: right;
				overflow: auto;
			}
			::-webkit-scrollbar{
				display: none;
			}
			.s li a img{
				width: 150px;
				height: 81.25px;
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="main">
		<h2>我最可爱的月月</h2>
		<ul class="big">
			<li>
				<img id="1" src="./img/1.jpg" >
			</li>
			<li>
				<img id="2" src="./img/2.jpg" >
			</li>
			<li>
				<img id="3" src="./img/3.jpg" >
			</li>
			<li>
				<img id="4" src="./img/4.jpg" >
			</li>
			<li>
				<img id="5" src="./img/5.jpg" >
			</li>
			<li>
				<img id="6" src="./img/6.jpg" >
			</li>
			<li>
				<img id="7" src="./img/7.jpg" >
			</li>
			<li>
				<img id="8" src="./img/8.jpg" >
			</li>
			<li>
				<img id="9" src="./img/9.jpg" >
			</li>
			<li>
				<img id="10" src="./img/10.jpg" >
			</li>
			<li>
				<img id="11" src="./img/11.jpg" >
			</li>
			<li>
				<img id="12" src="./img/12.jpg" >
			</li>
		</ul>
		<ul class="s">
			<li>
				<a href="#1"><img src="./img/1.jpg" ></a>
			</li>
			<li>
				<a href="#2"><img src="./img/2.jpg" ></a>
			</li>
			<li>
				<a href="#3"><img src="./img/3.jpg" ></a>
			</li>
			<li>
				<a href="#4"><img src="./img/4.jpg" ></a>
			</li>
			<li>
				<a href="#5"><img src="./img/5.jpg" ></a>
			</li>
			<li>
				<a href="#6"><img src="./img/6.jpg" ></a>
			</li>
			<li>
				<a href="#7"><img src="./img/7.jpg" ></a>
			</li>
			<li>
				<a href="#8"><img src="./img/8.jpg" ></a>
			</li>
			<li>
				<a href="#9"><img src="./img/9.jpg" ></a>
			</li>
			<li>
				<a href="#10"><img src="./img/10.jpg" ></a>
			</li>
			<li>
				<a href="#11"><img src="./img/11.jpg" ></a>
			</li>
			<li>
				<a href="#12"><img src="./img/12.jpg" ></a>
			</li>
		</ul>
		</div>
	</body>
</html>
